/**
 * 
 *  ①当用户单击“Button 4”的时候，控制台会输出什么？？？

    答：无论用户点击哪个button,控制台会输出数字5。因为当调用onclick方法的时候，for循环已经结束，变量i的值已经为5。

    ②提供一个或者多个可获取当前i的值的实现方案
 */

for (var i = 0; i < 5; i++) {
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("Button " + i));
  btn.addEventListener("click", function () {
    console.log(i);
  });

  document.body.appendChild(btn);
}

/**
 * 
 *  ①当用户单击“Button 4”的时候，控制台会输出什么？？？

    答：无论用户点击哪个button,控制台会输出数字5。因为当调用onclick方法的时候，for循环已经结束，变量i的值已经为5。

    ②提供一个或者多个可获取当前i的值的实现方案
 */

// 方案一：使用闭包实现
for(var i=0;i<5;i++){
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("Button "+i));
  btn.addEventListener('click',(function(i){  //这里使用了闭包，将循环变量存储了
	  return function(){
		  console.log(i);
	  }
  })(i));

// 方案二：使用ES6语法
for(let i=0;i<5;i++){   //这里使用了let  let具备块级作用域
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("Button "+i));
  btn.addEventListener('click',function(){
 console.log(i);
});
 
 document.body.appendChild(btn);
 
}
// 方案三：封装全部调用到新的匿名函数中
for(var i=0;i<5;i++){
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("Button "+i));
  (function(){
	  btn.addEventListener('click',function(){
		  console.log(i);
	  });
  })(i);
   document.body.appendChild(btn);
}
